{% extends 'base.html' %}

{% block title %}订单{% endblock %}

{% block body %}
    {{ super() }}

<!-- idc section starts  -->
<section class="idc" id="idc">

    <h1 class="heading">已开通<span>主机</span> </h1>
    {% if total_pages %}
    
    <h4 class="paging">
        {% if page == 1 %}
            <a href='/order/{{ username }}/p/1'>首页</a>
        {% else %}
            <a href='/order/{{ username }}/p/{{ page - 1 }}'>上一页</a>
        {% endif %}

        {% for i in range(total_pages) %}
            <a href='/order/{{ username }}/p/{{ i + 1 }}'><span>{{ i + 1 }}</span></a>
        {% endfor %}

        {% if page == total_pages %}
            <a href='/order/{{ username }}/p/{{ page }}'>尾页</a>
        {% else %}
            <a href='/order/{{ username }}/p/{{ page + 1 }}'>下一页</a>
        {% endif %}
    </h4>
    {% endif %}

    <div class="box-container">
        {% for order in orders %}
        <div class="box">
            <div class="node">
                <!-- <img src="http://q1.qlogo.cn/g?b=qq&nk=858125124&s=100" alt="qq avatar"> -->
                <!-- <img src="http://api.btstu.cn/sjtx/api.php?lx=c1&format=images" alt="qq avatar"> -->
                <img src="https://multiavatar.com/img/logo-animated.gif?v=003" alt="qq avatar">
                <div class="info">
                    <h3>{{ order.hoster.area }}</h3>
                    <h3>
                        {% if order.state %}
                        <h3>Okay</h3>
                        {% else %}
                        <h3>Error</h3>
                        {% endif %}
                    </h3>
                    <!-- <h3>{{ order.id }}</h3>
                    {% if "0" == order.state %}
                        <h3>正常</h3>
                    {% endif %}
                    {% if "1" == order.state %}
                        <h3>暂停</h3>
                    {% endif %}
                    {% if "2" == order.state %}
                        <h3>超流量</h3>
                    {% endif %}
                    {% if "3" == order.state %}
                        <h3>超数据库</h3>
                    {% endif %} -->
                    <h3>
                        <a href="/del/host/{{ order.host_name }}/{{ username }}/{{ page }}/{{ order.hoster.security_code}}" class="btn gradient">
                            <i class="fas fa-trash-alt"></i>
                        </a>
                        删除
                    </h3>
                </div>
                <i class="fas fa-quote-right"></i>
            </div>
            
            <div class="detail">

                <div class="line">
                    <i class="fas fa-cloud"></i>
                </div>

                <div class="line">
                    <div class="left">
                        <i class="fas fa-server">大小:</i>
                    </div>
                    <div class="right">
                        <i>{{ order.host_size }}M</i>
                    </div>
                </div>
                <div class="line">
                    <div class="left">
                        <i class="fas fa-key">帐号:</i>
                    </div>
                    <div class="right">
                        <i>{{ order.host_name }}</i>
                    </div>
                </div>
                <div class="line">
                    <div class="left">
                        <i class="fas fa-lock">密码:</i>
                    </div>
                    <div class="right">
                        <i>{{ order.host_pwd }}</i>
                    </div>
                </div>
                
                <div class="line">  
                    <div class="left">
                        <!-- <i class="fas fa-database"></i> -->
                    </div>
                    <div class="right">
                        <a href="/change/host/pwd/{{ order.host_name }}/{{ order.host_pwd }}/{{ username }}/{{ page }}/{{ order.hoster.security_code}}" class="btn gradient">
                            <div class="right">
                                <i class="fa fa-key"></i>重置密码
                            </div>
                        </a>
                    </div>
                </div>
                <div class="line">
                    
                </div>

                <div class="line">
                    <i class="fas fa-database"></i>
                </div>

                <div class="line">  
                    <div class="left">
                        <i class="fas fa-database">大小:</i>
                    </div>
                    <div class="right">
                        <i>{{ order.db_size }}M</i>
                    </div>
                </div>
                <div class="line">
                    <i class="fas fa-spa"></i>
                </div>

                <div class="line">
                    <div class="left">
                        <i class="fas fa-calendar-check">开通时间:</i>
                    </div>
                </div>
                <div class="line">
                    <div class="right">
                        <i>{{ order.start }}</i>
                    </div>
                </div>

                
                <div class="line">
                    <div class="left">
                        <i class="fas fa-calendar-check">到期时间:</i>
                    </div>
                </div>
                <div class="line">
                    <div class="right">
                        {% if 0 == order.end %}
                            <i>永久</i>
                        {% else %}
                            <i>{{ order.end }}</i>
                        {% endif %}
                    </div>
                </div>
                <div class="line">  
                    <form method="post" action="/order/deposit/{{ order.host_name }}/{{ username }}/{{ page }}" novalidate>
                        <div class="right">
                            {% if tips %}
                            <div class="errors">
                                <span><label for="errs">{{ tips }}</label></span>
                            </div>
                            {% endif %}
                            <input class="btn gradient" id="submit" name="submit" type="submit" value="续费😃">
                        </div>
                    </form>
                </div>

                <div class="line">
                    <form style="display:inline;" action='http://{{ order.hoster.ip }}:3312/vhost/index.php?c=session&a=login' method="post" target="_blank">
                        <input type="hidden" name="username" value="{{ order.host_name }}">
                        <input type="hidden" name="passwd" value="{{ order.host_pwd }}">
                        <button type="submit" class="btn gradient"><i class="fas fa-cloud"></i>登录</button>
                    </form>
                </div>

            </div>
        </div>
        {% endfor %}
    </div>
    
</section>
{% if total_pages %}
<h4 class="paging">
    {% if page == 1 %}
        <a href='/order/{{ username }}/p/1'>首页</a>
    {% else %}
        <a href='/order/{{ username }}/p/{{ page - 1 }}'>上一页</a>
    {% endif %}

    {% for i in range(total_pages) %}
        <a href='/order/{{ username }}/p/{{ i + 1 }}'><span>{{ i + 1 }}</span></a>
    {% endfor %}

    {% if page == total_pages %}
        <a href='/order/{{ username }}/p/{{ page }}'>尾页</a>
    {% else %}
        <a href='/order/{{ username }}/p/{{ page + 1 }}'>下一页</a>
    {% endif %}
</h4>
{% endif %}
<!-- idc section end  -->

{% endblock %}

{% block footer %}
{{ super() }}
{% endblock %}

{% block script %}
    {{ super() }}
{% endblock %}